<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base target="_black" />
    <title>搜 索</title>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        .container {
            margin: 0 auto;
            width: 600px;
            margin-top: 20px;
        }

        .container>div {
            width: 100%;
            height: 200px;
        }

        .so>.so1 {
            width: 524px;
            margin: 0 auto;
        }

        input[type="search"] {
            width: 400px;
            height: 40px;
            padding: 0 10px;
            color: #222;
            border: 1px solid #ddd;
            float: left;
        }

        button[type="submit"] {
            width: 100px;
            height: 40px;
            background-color: #00a1d6;
            color: white;
            border: 1px solid #38f;
            font-size: 16px;
        }

        .so>.baidu_logo,
        .bili_logo {
            margin: 20px auto 20px;
            width: 300px;
            height: 120px;
        }

        .so>.bili_logo {
            margin: 20px auto 0px;
        }

        .baidu_logo {
            background: transparent url(http://www.baidu.com/img/bd_logo1.png?qua=high&where=super) no-repeat center;
            background-size: cover;
        }

        .bili_logo {
            background: transparent url(http://s1.hdslb.com/bfs/static/jinkela/search/asserts/search_index_logo_v2.4.png) no-repeat 50%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="so">
            <div class="baidu_logo"></div>
            <div class="so1">
                <form method="get">
                    <input type="search" name="wd" placeholder="搜索你想要的内容..." autocomplete="on" autofocus>
                    <!-- pattern="[a-zA-Z]*" title="只能输入字母哦" -->
                    <button type="submit" formaction="https://baidu.com/s"> 百度一下 </button>
                </form>
            </div>
        </div>

        <div class="so">
            <div class="bili_logo"></div>
            <div class="so1">
                <form action="https://search.bilibili.com/all" method="get">
                    <!-- autocomplete 禁止自动填充 required为必填项 -->
                    <input type="search" name="keyword" placeholder="搜索你想要的内容..." autocomplete="off" list="myList"
                        required>
                    <datalist id="myList">
                        <option>冯提莫</option>
                        <option>老番茄</option>
                        <option>逍遥散人</option>
                        <option>陈睿</option>
                    </datalist>
                    <button type="submit"> bili一下 </button>
                </form>
            </div>
        </div>
    </div>


</body>

</html>